<template>
  <div class="dashboard-container">
<!--    <div class="container container7">
      <scores-radar-chart :model-and-data="scoresMB" height="400px"></scores-radar-chart>
    </div>-->
    <div class="container container7">
      <scores-radar-chart :model-and-data="scoresMR" height="400px"></scores-radar-chart>
    </div>
    <div class="container container7">
      <score-contrast-chart title="得分显著提升前五大指标" :scores="scoreContrast1" height="300px"></score-contrast-chart>
    </div>
    <div class="container container7">
      <score-contrast-chart title="得分显著提升前五大指标" :scores="scoreContrast2" height="300px"></score-contrast-chart>
    </div>
    <div class="container container7">
      <percentages-chart title="前五大低得分率指标" :percents="lowestScorePercentage1" height="200px"></percentages-chart>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ScoresChartMB from '../components/radar/ScoresChartMB.vue'
import ScoresRadarChart from '../components/radar/ScoresRadarChart.vue'
import ScoreContrastChart from '../components/bar-line/ScoreContrastChart.vue'
import ScoreTrendChart from '../components/bar-line/ScoreTrendChart.vue'
import PercentagesChart from '../components/pie/PercentagesChart.vue'
import { PercentItem, ScoreContrastItem, ScoreModelAndData } from '@/api-scp/types'
import {
  getScoreContrast1,
  getScoreContrast2,
  getScorePercentage1,
  getScoresMB,
  getScoresMR,
  ScoresMBEmpty,
  ScoresMREmpty
} from '@/api-scp/dashboard'

@Component({
  name: 'CombinedCharts3',
  components: {
    ScoresChartMB,
    ScoresRadarChart,
    ScoreContrastChart,
    PercentagesChart,
    ScoreTrendChart
  }
})
export default class extends Vue {
  private scoresMB: ScoreModelAndData = ScoresMBEmpty
  private scoresMR: ScoreModelAndData = ScoresMREmpty
  private scoreContrast1: ScoreContrastItem[] = []
  private scoreContrast2: ScoreContrastItem[] = []
  private lowestScorePercentage1: PercentItem[] = []

  created() {
    this.getScores1()
  }

  private async getScores1() {
    const [scoresMB, scoresMR, scoreContrast1, scoreContrast2] = await Promise.all([
      getScoresMB(),
      getScoresMR(),
      getScoreContrast1(),
      getScoreContrast2()
    ])
    this.scoresMB = scoresMB
    this.scoresMR = scoresMR
    this.scoreContrast1 = scoreContrast1
    this.scoreContrast2 = scoreContrast2

    this.lowestScorePercentage1 = await getScorePercentage1()
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 32px;
  //background-color: rgb(240, 242, 245);
  position: relative;

  .container {
    border: 1px solid #e3e3e3;
    margin-top: 1em;
  }

  .container4 {
    width: 400px;
  }

  .container5 {
    width: 500px;
  }

  .container6 {
    width: 600px;
  }

  .container7 {
    width: 700px;
  }
}

</style>
